<template>
  <div class="home" >
    <div class="search">
      <input type="text" v-model="searchKeyWord" > <input type="button" value="search" @click="searchByWord">
    </div>
    <div class="head">
      <input type="button" value="正常" @click="statusChange(0)">
      <input type="button" value="冻结" @click="statusChange(1)">
    </div>
    <div class="sort">
      <span @click="sortData(1)">全部 |</span><span @click="sortData(2)">按注册日期  |</span><span @click="sortData(3)">按名称顺序</span>
    </div>
    <div>
      <normalUser :userInfo="userInfo" :searchInfo="searchInfo" :isV="isV" :totalCount="totalCount" @pageSizeChange="pageSizeChangeHandler" @pageIndexChange="pageIndexChangeHandler" @freshFreezeList="searchUser()"></normalUser>
    </div>
  </div>
</template>

<script>
  import normalUser from './NormalUser.vue'
  import userService from './UserService.js'

  export default {
    data () {
      return {
        totalCount: 100, // 列表总条数
        // 查询参数
        searchInfo: {
          'user_status': 0,
          'sort': 1, // 用户状态 0.正常 1.冻结
          'page': 1, // 页码
          'page_size': 10, // 页大小,一页显示数据条数
          'skey': '' // 昵称搜索
        },
        isV: false, // 是否为大V用户
        searchKeyWord: '', // 搜索关键字
        userInfo: []  //  返回用户列表
      }
    },
    created: function () {
      this.isV = parseFloat(this.$route.params['isV'])
      console.log(this.isV)
      this.searchUser()
    },
    // 大V用户和普通用户切换，监听路由变化
    watch: {
      '$route' (to, from) {
        if (to === from) {
        } else {
          this.isV = parseFloat(this.$route.params['isV'])
          console.log(this.isV)
          this.resetSearchParam()
          this.searchUser()
        }
      }
    },
    components: {normalUser},
    methods: {
      // 切换状态展示 0代表正常 1代表冻结
      statusChange (status) {
        this.searchInfo.user_status = status
        this.searchUser()
      },
      // 重置查询参数
      resetSearchParam () {
        this.searchInfo = {
          'user_status': 0,
          'sort': 1,
          'page': 1,
          'page_size': 10,
          'skey': ''
        }
      },
      // 当前展示页码变化
      pageIndexChangeHandler (pageIndex) {
        this.searchInfo.page = pageIndex
        this.searchUser()
      },
      // 每页展示数据条数改变
      pageSizeChangeHandler (pageSize) {
        this.searchInfo.page_size = pageSize
        this.searchUser()
      },
      // 排序字段变化 1.默认 2.注册时间 3.用户昵称
      sortData (order) {
        this.searchInfo.sort = order
        this.searchUser()
      },
      // 关键字查询
      searchByWord () {
        this.searchInfo.skey = this.searchKeyWord
        this.searchUser()
      },
      // 根据不同的查询参数获取用户列表
      searchUser () {
        var _this = this
        userService.getNormalUserInfo(this.isV, this.searchInfo).then(response => {
          // console.log(response)
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            response = response.data
            _this.userInfo = response.data
            _this.totalCount = response.count
          } else {
            alert(response.data.msg)
          }
        }, response => {
          console.log(response)
          alert(response)
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .head{
    height: 30px;
    text-align: left;

  }
  .sort{
    text-align: right;
  }
  .search{
    text-align: left;
  }

</style>
